<template>
  <div class="box">
    <div class="condition" v-if="getUser">
      <div >
        <el-button  type="warning" @click="add(null)">新增分站</el-button>
      </div>
    </div>
    <div class="tbale">
      <el-table :data="tableData" :header-cell-style="{
        background: 'rgb(40,103,185)',
        color: 'white',
        borderColor: 'rgb(43,88,144)',
        'text-align': 'center'
      }" :cell-style="{ 'text-align': 'center' }" height="750" style="width: 100%; padding: 0; height: 750px">
        <el-table-column prop="SubStationNum" label="分站编号" width="">
        </el-table-column>
        <el-table-column prop="SubStationName" label="分站名称" width="">
        </el-table-column>
        <el-table-column prop="SubStationType" label="分站类型" width="">
        </el-table-column>
        <el-table-column prop="SubStationLocation" label="分站位置" width="">
        </el-table-column>
        <el-table-column prop="SubStationIP" label="分站IP" width="">
        </el-table-column>
        <el-table-column prop="SubStationPort" label="端口号" width="">
        </el-table-column>
        <el-table-column label="操作" v-if="getUser">
          <template slot-scope="scope">
            <el-button size="mini" @click="add(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delClick(scope.row.ID)">删除</el-button>
          </template>
          <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <!-- <span>这是一段信息</span> -->
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </el-table-column>
      </el-table>
    </div>
    <add-edit ref="addedit" />
  </div>
</template>

<script>
import xslx from '../../components/xslx.vue'
import AddEdit from './AddEdit/add_and_xiu_FenZhanPeiZhi.vue'
import { dingbanshebeipeizhi, dingbanshebeipeizhishanchu } from '../../https/api/user'
export default {
  components: { xslx, AddEdit },
  data() {
    return {
      Sub: "",
      options: [{ label: "分站一", value: 1 }],
      tableData: [],
      dialogVisible: false,
      getUser: ''

    };
  },
  mounted() {
    this.Onlist()
    this.restaurants = this.loadAll()
    
    this.getUser = localStorage.getItem('User') == 'user' ? false : true
     console.log(this.getUser);
  },
  methods: {
    loadAll() {
      return this.tableData
    },
    add(data) {
      // 打开对话框方法，接收表单数据，如果数据为null则新增否则为编辑
      this.$refs.addedit.show(data)
    },
    Onlist() {
      dingbanshebeipeizhi().then(res => {
        console.log('分站信息', res);
        if (res) {
          this.tableData = res
        } else {
        
        }
      })
    },

    tuichu() {
      this.Isshow = false
    },

    delClick(x) {
      this.$confirm('是否删除这条数据？')
        .then(_ => {
          // console.log("删除", x);
          const data = {
            id: x,
          };
          dingbanshebeipeizhishanchu(data).then((res) => {
            if (res) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
            this.Onlist();
          });
        })
        .catch(_ => { });

    }
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  padding: 0 20px;

  .condition {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    // border: 1px solid red;

    >div:nth-child(1) {
      color: white;
      margin-left: 20px;
      background-color: rgb(242, 148, 85);
    }

    >div:nth-child(2) {
      color: white;
      margin-left: 20px;
    }

    >div:nth-child(3) {
      color: white;
      margin-left: 20px;
    }
  }

  .tbale {
    width: 100%;
    height: 750px;
    margin-top: 10px;
  }
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgb(255, 255, 255) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

::v-deep .el-table th>.cell {
  color: rgba(254, 254, 254, 1) !important;
  font-weight: 700 !important;
}

.el-table::before {
  //去除底部白线
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 0px !important;
}
</style>